<template>
  <div class="reg-con">
    <div
      v-for="item in list"
      class="reg-date reg-tags flex-column btn"
      :class="{ active: checkActive(item) }"
      @click="checked(item)"
    >
      <span>{{ item.label }}</span>
      <span v-if="item.subtitle">{{ item.subtitle }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  active: {
    type: Array || Object,
    default: {},
  },
  activeKey: {
    type: String,
    default: "",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
});
const emits = defineEmits(["onChange"]);
const checkActive = (item) => {
  let { multiple, activeKey,active } = props;
  if (!multiple) {
    return active[activeKey] == item[activeKey];
  } else {
    return active.includes(item[activeKey]);
  }
};
const checked = (item) => {
  emits("onChange", item);
};
</script>

<style lang="scss" scoped>
.reg-con {
  margin: 0 -15px;
  padding: 0 15px;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  overflow-x: auto;
  .reg-date {
    min-width: 96px;
    flex-shrink: 0;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 6px 10px;
    text-align: center;
    //   background: #e6e6e6;
    border: 1px solid #e6e6e6;
    color: #333333;
    &.active {
      @extend .reg-tags-active;
    }
    &:last-child {
      margin-right: 0;
    }
    span {
      &:nth-child(1) {
        font-size: 15px;
      }
      &:nth-child(2) {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
  .reg-tags-active {
    background: var(--van-primary-color);
    border: 1px solid var(--van-primary-color);
    color: #fff;
  }
  .reg-tags {
    border-radius: 6px;
    &.full {
      .status {
        color: #3b97fb;
      }
    }
    &.suspend {
      background: #f6f6f6;
      border: 1px solid #f6f6f6;
    }
  }
}
</style>
